<template>
    <transition
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
    >
    <div class="comments" v-if="show">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    评论
                </div>
                <ul v-for="comment in comments">
                    <comment :model="comment" :cbus="cbus"></comment>
                </ul>
                <div v-if="open">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-input
                                    placeholder="你的昵称*"
                                    prefix-icon="el-icon-search"
                                    v-model="nickname">
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-input
                                    placeholder="您的邮箱*（不会被公开）"
                                    prefix-icon="el-icon-search"
                                    v-model="email">
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-input
                                    placeholder="您的网址"
                                    prefix-icon="el-icon-search"
                                    v-model="website">
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="text-input">
                        <el-col :span="24">
                            <el-input placeholder="留下足迹吧，反正又不会怀孕" type="textarea" v-model="remark"></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="comment-btn">
                        <el-col :span="24">
                            <el-button class="reply-btn" type="primary" @click="commit">发表评论</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
    </div>
    </transition>
</template>

<script>
    import {log,buildParams,sendMessage} from '@/assets/js/util.js'
    import Vue from 'vue'
    import comment from '@/components/comment'

    var bus = new Vue()
    export default{
        props:['postId'],
        name: '评论主页面',
        data () {
            return {
                msg: 'comments',
                show:false,
                open:false,
                post_id:'',
                parent:'',
                nickname:'',
                email:'',
                website:'',
                remark:'',
                comments:[],
                cbus:bus,
            }
        },
        methods:{
            init:function () {
                var params = []
                params[0] = 'post_id='+this.postId
                var url = server_url+'/api/comments'+buildParams(params)
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                    this.comments = response.data.data
                    this.show = true
                    this.open = true
                }, function(response) {
                    log(response)
                });
            },
            commit:function () {
                var params = []
                params[0] = 'nickname='+this.nickname
                params[1] = 'email='+this.email
                params[3] = 'website='+this.website
                params[4] = 'remark='+this.remark
                params[5] = 'post_id='+this.postId
                params[6] = 'parent='+this.parent
                var url = server_url + '/api/commit'+buildParams(params)
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                    var data = response.data
                    if(data.ret == 1){
                        sendMessage('留言成功','success',this)
                        this.init()
                    }else{
                        sendMessage(data.msg,'',this)
                    }
                    this.clear()
                }, function(response) {
                    sendMessage('未知错误','warning',this)
                });
            },
            handleParams:function (params) {
                this.nickname = params.nickname
                this.email    = params.email
                this.website  = params.website
                this.remark   = params.remark
                this.parent   = params.parent
                log(params)
                this.commit()
            },
            handleKey:function (id) {
                log('key'+id)
                if(id != 0){
                    this.open = false
                }else{
                    this.open = true
                }
            },
            clear:function () {
                this.nickname = ''
                this.email    = ''
                this.website  = ''
                this.remark   = ''
                this.parent   = ''
            }
        },
        components: {
            'comment':comment
        },
        mounted:function () {
            this.cbus.$on('sendParams',this.handleParams)
            this.cbus.$on('sendkey',this.handleKey)
            this.init()
        }
    }
</script>

<style>
    .comments{
        margin-top: 10px;
    }
    .comments .box-card{
        margin-top: 10px;
    }
    .reply-btn{
        float: right;
    }
</style>